import React from 'react'
import ReactDOM from 'react-dom'
import DateSelector from 'mob-date-selector'
import 'mob-date-selector/index.css'  
import * as DataHandler from './DataHandler'
import './css/ListDeal.css' 


class ListDeal extends React.Component {
  constructor (props) {
    super(props)
    this.state = { 
        // areaPanel : 'none',
        beginDisplay : 'none',
        endDisplay : 'none', 
        mediaCount:0, 
    }
  }     
   condition = {
        bTime : '',
        eTime : '',
        address  : ''
    }
  componentWillMount = () => {  
        this.boxW = document.documentElement.clientWidth  || document.body.clientWidth;
         this.boxH = document.documentElement.clientHeight || document.body.clientHeight; 
        if(this.props.listConfig !== undefined) this.config = Object.assign(this.config,this.props.listConfig); 
        this.condition.bTime =  T.clock(new Date()).fmt('YYYY-MM-DD')+ ' 08:00';
        // this.condition.bTime =  T.clock(DataHandler.dateAdd( new Date(),"mm", -30)).fmt('YYYY-MM-DD')+ ' 08:00';
        this.condition.eTime = this.condition.bTime;
  } 
  componentDidMount = () => {
         let is_hmPar ={   type : 1,   param : [1,1,1,1,1]  }
        if(this.config.is_hm==1){////不要时分
            is_hmPar ={   type : 1,   param : [1,1,1,0,0]  }
        }
         setTimeout(() => {
            new DateSelector({
                input : 'beginWaterTime',
                container : 'beginWaterTimeContainer',
                type : is_hmPar.type,
                param : is_hmPar.param,
                beginTime : [ ],
                endTime : [ ],
                recentTime : [ ],
                back : () => {
                    this.setState({beginDisplay:'none'})
                },
                success : (arr) => { //YYYY-MM-DD HH:mm:ss
                    setTimeout(() => {
                        let YYYY = arr[0];
                        let MM = (arr[1] < 10) ? '0' + arr[1] : arr[1];
                        let DD = (arr[2] < 10) ? '0' + arr[2] : arr[2];
                        let HH = (arr[3] < 10) ? '0' + arr[3] : arr[3];
                        let mm = (arr[4] < 10) ? '0' + arr[4] : arr[4]; 
                        if(this.config.is_hm==1){////不要时分
                            this.condition.bTime =  YYYY + '-' + MM + '-' + DD ;
                        }else{
                            this.condition.bTime =  YYYY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm; 
                        }
                        let curTs =  new Date(this.condition.bTime .replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假开始时间
                        let curTe =  new Date(this.condition.eTime.replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假结束时间
                        let ms = curTe-curTs;
                        if(ms>0){
                                this.tmsFn(this.condition.bTime,this.condition.eTime)
                        }else{
                            this.condition.bTime  =   this.condition.eTime ;
                            alert('开始时间要小于结束时间')
                            this.config.tms=0
                        }
                    
                        this.setState({beginDisplay : 'none'});
                    },200) 
                }
            });  
        },300)


         this.config.data.map((item,i) => { 
            if(item.type=='time'){
                console.log(this.condition.bTime)
                setTimeout(() => {
                      new DateSelector({
                        input : 'endWaterTime',
                        container : 'endWaterTimeContainer',
                        type : is_hmPar.type,
                        param : is_hmPar.param,
                        beginTime : [],
                        endTime : [],
                        recentTime : [],
                        back : () => {
                            this.setState({endDisplay:'none'})
                        },
                        success : (arr) => {
                             setTimeout(() => {
                                let YYYY = arr[0];
                                let MM = (arr[1] < 10) ? '0' + arr[1] : arr[1];
                                let DD = (arr[2] < 10) ? '0' + arr[2] : arr[2];
                                let HH = (arr[3] < 10) ? '0' + arr[3] : arr[3];
                                let mm = (arr[4] < 10) ? '0' + arr[4] : arr[4]; 
                                if(this.config.is_hm==1){////不要时分
                                    this.condition.eTime =  YYYY + '-' + MM + '-' + DD ;
                                }else{
                                    this.condition.eTime =  YYYY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm; 
                                }
                                let curTs =  new Date(this.condition.bTime .replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假开始时间
                                    let curTe =  new Date(this.condition.eTime.replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假结束时间
                                    let ms = curTe-curTs;
                                    if(ms>0){
                                        this.tmsFn(this.condition.bTime,this.condition.eTime)
                                    }else{
                                        this.condition.eTime  =   this.condition.bTime ;
                                        alert('结束时间要大于开始时间')
                                        this.config.tms=0
                                    }
                                this.setState({endDisplay : 'none'});
                          },200);  
                        }
                    });  
              },300)
            }
        })
  }
 

      //查询
    search = () => {
        this.props.search(this.condition);
        // this.closeSearchPanel();
    }
    //关闭时间查询
    closeSearchPanel = () => {
        this.props.closeSearchPanel();
    }

   /**文件选择 */ 
  fileData=[]; 
  fileindex=0;  

  readAsDataURL=(This)=>{  
    var that=this;
    for (var i=0; i<This.files.length; i++) {
        this.fileindex++;
        var obj={id:this.fileindex,file:This.files[i]}
        this.fileData.push(obj);
        var reader = new FileReader(); 
        reader.readAsDataURL(This.files[i]);
        reader.dataobj=obj
        reader.onload = function(e){  
            var result=that.refs["fileContent"],//document.getElementById(vm.clid+"result"),  
                add = that.refs["fileadd"],//document.getElementById(vm.clid+"add");
                  filelists = that.refs["filelists"];
                var div = document.createElement("div");
                var closeDom=document.createElement("label");
                closeDom.innerHTML='X';
                closeDom.attributes.fileid=e.currentTarget.dataobj.id;
                closeDom.className='close';
                closeDom.addEventListener('click',function(e){
                //var targetFile= _.filter(that.fileData, function(item){ return item.id !== e.target.attributes.fileid; })
                let targetIndex=that.fileData.findIndex(item=>item.id==e.target.attributes.fileid)
                let temp1 =that.fileData.slice(0,targetIndex)
                let temp2 =that.fileData.slice(targetIndex+1,that.fileData.length);
                let targetFile=temp1.concat(temp2);
                that.fileData=targetFile; 
                that.setState({mediaCount:that.fileData.length}) 
                // result.removeChild(e.target.parentNode)
                filelists.removeChild(e.target.parentNode)
                
                return false
            })
            var newImg = document.createElement("img");
            var type=this.result.substring(this.result.indexOf(':')+1,this.result.indexOf('/'));
            if(type==='video'){
                newImg.src = './assets/pzqz/video.png';
            }
            else if(type==='audio'){
                newImg.src = './assets/pzqz/audio.png';
            }
            else if(type==='image'){
                newImg.src = this.result;   
            }
            else{
                newImg.src ='./assets/pzqz/file.png';
            }
            newImg.className = "showImge";
            newImg.style.width = "100%";
            newImg.style.height = "100%";
            
            div.appendChild(closeDom)
            div.appendChild(newImg); 

            // result.insertBefore(div,add);
           filelists.appendChild(div)
        } 
    }
    // this.mediaCount=this.fileData.length;
    // this.config.data = this.fileData;
    this.mediaCount = this.fileData.length;
    this.setState({ })
  }
 
    config = { 
          width : 350,
        height : 500,
        direction : 'top',
        speed : 2,
        state : false, 
        is_hm:0,//要时分
        tms:0, 
    }

   
    // lev = (st,et,rule) => {  
    //     let curTs =  new Date(st.replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假开始时间
    //     let curTe =  new Date(et.replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假结束时间
    //     let curM = curTs.getMonth()+1;
      
    //     //冬令制和夏令制上午的上班时间一样,下午的下班时间一样
    //     let ssxtm =   T.clock(curTs).fmt('YYYY-MM-DD')+' 08:30' ;//上班时间
    //     let sxbtm =   T.clock(curTe).fmt('YYYY-MM-DD')+' 12:00' ;//下班时间 
    //     let xxbtm =   T.clock(curTe).fmt('YYYY-MM-DD')+' 18:00' ;//下班时间 
    //     let xsxtm='';//下午上班时间
    //     if(curM>9 || curM<=6){//夏令制  
    //          xsxtm =   T.clock(curTs).fmt('YYYY-MM-DD')+' 15:00' ;//上班时间  
    //     }else{//冬令制 
    //          xsxtm =   T.clock(curTs).fmt('YYYY-MM-DD')+' 14:30' ;//上班时间  
    //     } 
    //     let curHs =curTs.getHours(); //9
    //     if(curHs>8){//9点 
    //         let ms = curTe-curTs;
    //             DataHandler.millisecondToDate(ms);
    //     }else if(curHs<8){//7点
        
    //     }else {//8点

    //         if(curTs.getMinutes()>0){//08:01
                    
    //         }else{  
    //         } 
    //     }  
    // }
    
  tmsFn = (startT,endT)=> {
 
             let that =this;
            T.ajax({
            key: 'fzmjxy_select_diff_hour',
            data: {time:'['+startT+','+endT+']'},
            success: function success(result) {
                    let results = typeof(result)=='string'? JSON.parse(result):result;
                    let data = results.data?results.data:[];//可能是错误的
                    // that.proDataFn(data,type); 
                    that.config.tms = data; 
                    that.setState()

                }
            });
      

  }
 
  render () {   
        if(this.props.listConfig !== undefined) this.config = Object.assign(this.config,this.props.listConfig); 
      
    return ( 
      <div  className='Wrap'> 
                  {  
                    this.config.data.map((item,i)=>{ 
                        switch(item.type){
                                case 'btn':
                                    return(
                                        <div className={item.type+'Wrap'}>
                                             <div className="icon" style={{display:item.icon?'block':'none'}}>
                                                <img src={item.icon} alt=""/> 
                                            </div>
                                            <label for="" style={item.itemStyle}>{item.name}</label>
                                            <div className='rightC'>
                                                {
                                                    item.data.map((jtem,j)=>{
                                                        return (
                                                            <span className={jtem.text==item.currentLev?'normal active':'normal'} onClick = {()=>item.btnClick(item,j)}>{jtem.text}</span>
                                                        )
                                                    })
                                                }
                                            </div> 
                                        </div>
                                    )
                                break;
                                case 'textarea':
                                        return(
                                            <div className={item.type+'Wrap'}>
                                                <div className="icon"style={{display:item.icon?'block':'none'}}>
                                                    <img src={item.icon} alt=""/> 
                                                </div>
                                                <label for="" style={item.itemStyle}>{item.name}</label>
                                                <div className='rightC'>
                                                    <textarea rows="" cols=' ' type="" name="" value={item.content} style={item.rightStyle} onChange={()=>item.inputChange(event,item)}>
                                                    </textarea>
                                                </div> 
                                            </div>
                                        )
                                break;
                                case 'input':
                                        return(
                                            <div className={item.type+'Wrap'}>
                                                <div className="icon" style={{display:item.icon?'block':'none'}}>
                                                    <img src={item.icon} alt=""/> 
                                                </div>
                                                <label for="" style={item.itemStyle}>{item.name}</label>
                                                <div className='rightC'>
                                                    <input  type="text" name="" value={item.content} style={item.rightStyle} onChange={()=>item.inputChange(event,item)} placeholder={item.placeholder?item.placeholder:''}>
                                                    </input>
                                                </div> 
                                            </div>
                                        )
                                break;
                                case 'time':  
                                    {/*let curTs =  new Date(this.condition.bTime .replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假开始时间
                                    let curTe =  new Date(this.condition.eTime .replace(/(\d{4})-(\d{2})-(\d{2})T(.*)/, "$1/$2/$3 $4"));//请假结束时间
                                     let ms = curTe-curTs;
                                      item.tms = ms>0?DataHandler.millisecondToDate(ms):"0"; */}
                              
                                    return(
                                            <div className={item.type+'Wrap'}> 
                                                <div>
                                                    <div className="icon" style={{display:item.icon?'block':'none'}}>
                                                        <img src={item.icon} alt=""/> 
                                                    </div>
                                                    <label for="" style={item.itemStyle}>{item.name}</label>
                                                </div>
                                                <div className='rightC'> 
                                                    <div className = 'beginTime_wrap time_wrap'> 
                                                        <label id="beginWaterTime" onClick = {() => this.setState({beginDisplay : 'block'})} >{this.condition.bTime}</label>
                                                        <div id="beginWaterTimeContainer" style = {{display : this.state.beginDisplay}}></div>     
                                                    </div>  
                                                    到
                                                    <div className = 'endTime_wrap time_wrap'> 
                                                        <label id="endWaterTime"  onClick = {() => this.setState({endDisplay : 'block'})}>{this.condition.eTime}</label>
                                                        <div id="endWaterTimeContainer" style = {{display : this.state.endDisplay}}></div>
                                                    </div> 
                                                    <div className="timeicon"> </div>
                                                </div> 
                                                <div className="tms" style={{display:this.condition.eTime?'block':'none'}}>
                                                    请假时长 <span>{this.config.tms } 小时</span> 
                                                </div>
                                            </div> 
                                        )
                                break;
                               case 'signleTime':    
                                    return(
                                            <div className={item.type+'Wrap'}> 
                                                <div>
                                                    <div className="icon" style={{display:item.icon?'block':'none'}}>
                                                        <img src={item.icon} alt=""/> 
                                                    </div>
                                                    <label for="" style={item.itemStyle}>{item.name}</label>
                                                </div>
                                                <div className='rightC'> 
                                                    <div className = 'beginTime_wrap time_wrap'> 
                                                        <label id="beginWaterTime" onClick = {() => this.setState({beginDisplay : 'block'})} >{ this.condition.bTime .replace(/(\d{4})-(\d{2})-(\d{2}) (.*)/, "$1-$2-$3")}</label>
                                                        <div id="beginWaterTimeContainer" style = {{display : this.state.beginDisplay}}></div>     
                                                    </div>   
                                                    <div className="timeicon"> </div>
                                                </div>  
                                            </div> 
                                        )
                                break;
                                case 'custonLabel':
                                    return(
                                        <div className={item.type+'Wrap'}>
                                            <div className="icon" style={{display:item.icon?'block':'none'}}>
                                                <img src={item.icon} alt=""/> 
                                            </div>
                                            <label for="" style={item.itemStyle}>{item.name}</label>
                                            <div className='rightC'>
                                                <div className='custonLabel'>
                                                    { 
                                                        item.data.map((ktem,k)=>{
                                                            return(
                                                                <label >{ktem.name}({ktem.mobile}),</label>
                                                            )
                                                        })
                                                    }
                                                </div>
                                                <div  style={item.btnStyle} onClick={item.btnClick}>
                                                    {item.btnTxt}
                                                </div>
                                            </div> 
                                        </div>
                                    )
                                break;
                                case 'file':
                                            let listShow=item.data.length>0?'block':'none';
                                            return(
                                                <div className={item.type+'Wrap'}>
                                                    <div> 
                                                        <div className="icon" style={{display:item.icon?'block':'none'}} >
                                                            <img src={item.icon} alt=""/> 
                                                        </div>
                                                        <div className='title'>
                                                            <p  style={item.nameStyle}>{item.name}</p>   
                                                            <div className="tool">
                                                                <div className="unload" ref="fileContent" >
                                                                    <div ref="fileadd" className="add" style = {{display : (this.fileData.length < 3) ? 'block' : 'none'}}>
                                                                        <form ref="uploadform" >   <input ref="fileinput"  type="file" multiple  onChange={(e)=>this.readAsDataURL(e.target)}   name="media" />   </form> 
                                                                        </div>
                                                                </div>
                                                            </div> 
                                                        </div>
                                                   </div>
                                                   <div  className='lists'  ref='filelists'>   </div>  
                                                </div>
                                            )
                                    break;
                                
                        }
                    
                    })
                } 
      </div>
    )
  }
}

export default ListDeal